<template>
  <div id="app">
    <div v-if="key == 'mobile'">
      <router-view />
    </div>
    <div class="container" v-else>
      <aside class="left-sidebar">
        <sidebar />
      </aside>
      <section class="main-content">
        <router-view />
      </section>
    </div>
    <KunkkaMinimizeDialog></KunkkaMinimizeDialog>
  </div>
</template>

<script>
import Sidebar from '@/components/Sidebar'

export default {
  name: 'app',
  components: {
    Sidebar,
  },
  computed: {
    key() {
      return this.$route.meta.type
    }
  }
}
</script>

<style lang="scss">
html,
body {
  height: 100%;
  overflow: hidden;
}

#app {
  display: flex;
  flex-direction: column;
  background-color: #eee;

  height: 100%;
  overflow: auto;
  .container {
    display: flex;
    flex: 1;
    height: 100%;
    .left-sidebar {
      width: 240px;
      height: 100%;
      overflow: auto;
      background-color: #ffffff;
      box-shadow: 0 0 10px 0 rgba(131, 142, 162, 0.22);
      text-align: center;
    }
    .main-content {
      flex: 1;
      margin: 0 auto;
      padding: 24px 32px;
      margin: 0 16px 12px 16px;
      overflow: auto;
      background-color: #fff;
    }
  }
}
</style>
